"use client";

/**
 * 吸附
 *
 * snap-center 吸附中间
 * snap-normal 总是吸附
 *
 * @returns {*}
 * @constructor
 */
export default function Page(){
  return (
    <div className={"h-screen bg-slate-200"}>
      <div className={"bg-slate-400 w-1/2 h-56 mx-auto mt-20 snap-x flex gap-5 overflow-x-auto py-10 px-10"}>
        <div className={"w-72 bg-pink-200 shrink-0 snap-normal"}></div>
        <div className={"w-72 bg-pink-200 shrink-0 snap-center"}></div>
        <div className={"w-72 bg-pink-200 shrink-0 snap-center"}></div>
        <div className={"w-72 bg-pink-200 shrink-0 snap-center"}></div>
        <div className={"w-72 bg-pink-200 shrink-0 snap-center"}></div>
        <div className={"w-72 bg-pink-200 shrink-0 snap-center"}></div>
      </div>
      <div className={"fixed w-px h-screen bg-pink-500 left-1/2 -translate-x-1/2 z-50 top-20"}></div>
    </div>

  )
}
